<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星途影视</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keyword" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/withdraw-cash.css">
</head>
<body>
<!--HEADER-->
<div id="header">
    <p class="header-content">我要提现</p>
    <span class="back">&lt;</span>
</div>

<div class="mt1_5"></div>
<!--main content-->
<div class="cash-num">
    <div class="yinhang">
            <div class="key"><span>●</span>选择银行卡</div>
            <!--<div class="val" style="background: url('img/zhaoshang-icon.png') no-repeat left center;background-size: 0.4rem 0.4rem;">招商银行</div>-->
            <div class="val">招商银行</div></a>
    </div>
    <div class="">
        <div class="key"><span>●</span>可提取现金</div>
        <div class="val">
            ¥ 323333.00
        </div>
    </div>
    <div class="">
        <div class="key"><span>●</span>提现金额</div>
        <div class="val">
            <input type="number" placeholder="请输入充值金额">
        </div>
    </div>
</div>
<div class="pay-pwd">
    <div class="key">支付密码</div>
    <div class="val">
        <input type="password" placeholder="请输入支付密码">
    </div>
</div>
<div class="withdraw-cash-btn">
    <button type="button">申请提现</button>
</div>

<div id="model-box"></div>
<div id="model">
    <p class="title">选择银行卡 <span>&times;</span></p>
    <ul class="card-list">
        <li>招商银行（3077）</li>
        <li>招商银行（3177）</li>
        <li>招商银行（3077）</li>
        <li>招商银行（3277）</li>
        <li>招商银行（3377）</li>
        <li>招商银行（3477）</li>
        <li>招商银行（3577）</li>
        <li>招商银行（3677）</li>
        <li>招商银行（3777）</li>
    </ul>
</div>

<script src="js/fontSize.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
    $(".yinhang").on("click",function () {
        $("#model").css("display","block");
        $("#model-box").css("display","block");
    })
    $("#model .title span").on("click",function () {
        $("#model").css("display","none");
        $("#model-box").css("display","none");
    })
    $(".card-list").on("click","li",function () {
        // console.log($(this).text());
        var cardNumber = $(this).text();
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        $("#model").css("display","none");
        $("#model-box").css("display","none");
        $(".yinhang .val").text(cardNumber);
    })
</script>
</body>
</html>